<template>
  <div class="info-container box-bg-color main-content">
    <el-form
      ref="settingFormRef"
      :model="settingForm"
      :rules="formRules"
      label-position="right"
      label-width="160px"
      v-loading="loading"
    >
      <el-tabs
        v-model="activeNames"
        type="border-card"
        class="tabs"
      >
        <el-tab-pane label="邮箱配置" name="1">
          <el-alert title="一旦填写邮箱配置，请全部填写完邮箱配置信息，否则会发送邮件失败" type="warning" :closable="false" />
          <el-form-item label="邮箱授权码" prop="emailCode">
            <el-input v-model="settingForm.emailCode" placeholder="请输入邮箱授权码"></el-input>
          </el-form-item>
          <el-form-item label="发送邮件的邮箱" prop="emailMail">
            <el-input v-model="settingForm.emailMail" placeholder="请输入发送邮件的邮箱"></el-input>
          </el-form-item>
          <el-form-item label="接收邮件的邮箱" prop="receiveMail">
            <el-input v-model="settingForm.receiveMail" placeholder="请输入接收邮件的邮箱"></el-input>
          </el-form-item>
          <el-form-item label="发送邮件的邮箱端口" prop="emailPort">
            <el-input v-model="settingForm.emailPort" type="number" placeholder="请输入邮箱端口"></el-input>
          </el-form-item>
          <el-form-item label="发送邮件提示语" prop="emailMarketing">
            <el-input type="textarea" v-model="settingForm.emailMarketing" placeholder="请输入邮件营销语"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="阿里云短信配置" name="2">
          <el-alert title="一旦填写阿里云短信配置，请全部填写完阿里云短信配置信息，否则会发送短信失败" type="warning" :closable="false" />
          <el-form-item label="短信AccessKey" prop="smsAccessKey">
            <el-input v-model="settingForm.smsAccessKey" placeholder="请输入短信AccessKey"></el-input>
          </el-form-item>
          <el-form-item label="短信Access密钥" prop="smsAccessSecret">
            <el-input v-model="settingForm.smsAccessSecret" placeholder="请输入短信Access密钥"></el-input>
          </el-form-item>
          <el-form-item label="短信签名" prop="smsSignName">
            <el-input v-model="settingForm.smsSignName" placeholder="请输入短信签名"></el-input>
          </el-form-item>
          <el-form-item label="短信模板code" prop="smsCode">
            <el-input v-model="settingForm.smsCode" placeholder="请输入短信模板code"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="阿里云OSS配置" name="3">
          <el-alert title="一旦填写阿里云OSS配置，请全部填写完阿里云OSS配置信息，否则会失败" type="warning" :closable="false" />
          <el-form-item label="OSS的AccessKey" prop="ossAccessKey">
            <el-input v-model="settingForm.ossAccessKey" placeholder="请输入OSS的AccessKey"></el-input>
          </el-form-item>
          <el-form-item label="OSS的Access密钥" prop="ossAccessSecret">
            <el-input v-model="settingForm.ossAccessSecret" placeholder="请输入OSS的Access密钥"></el-input>
          </el-form-item>
          <el-form-item label="OSS的region" prop="ossRegion">
            <el-input v-model="settingForm.ossRegion" placeholder="请输入OSS的region"></el-input>
          </el-form-item>
          <el-form-item label="OSS的bucket" prop="ossBucket">
            <el-input v-model="settingForm.ossBucket" placeholder="请输入OSS的bucket"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="快递鸟物流配置" name="4">
          <el-alert title="一旦填写物流配置，请全部填写完快递鸟物流配置" type="warning" :closable="false" />
          <el-form-item label="快递鸟用户ID" prop="logisticsUserId">
            <el-input v-model="settingForm.logisticsUserId" placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item label="快递鸟API的KEY" prop="logisticsKey">
            <el-input v-model="settingForm.logisticsKey" placeholder="请输入API的KEY"></el-input>
          </el-form-item>
          <el-form-item label="测试的物流信息" prop=" ">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in races"
                :key="index"
                :timestamp="item.AcceptTime">
                {{ item.AcceptStation }}
              </el-timeline-item>
            </el-timeline>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    
    <div class="btnBox">
      <el-button type="primary" @click="sendMail" v-if="activeNames === '1'">测试发送邮箱</el-button>
      <el-button type="primary" @click="sendSms" v-if="activeNames === '2'">测试发送短信</el-button>
      <el-button type="primary" @click="sendLogisticsApi" v-if="activeNames === '4'">测试查询物流信息</el-button>
      <el-button type="primary" @click="updateOrCreate">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, type PropType } from 'vue';
  import { UPDATE_MODEL_EVENT } from 'cm/contants';
  import { validPhone } from '@/utils/validate';
  import { getSetting, updateSetting, sendMailApi, sendSmsApi, sendLogistics, type ICreateOrUpdateSetting } from '@/api/setting';
  import { ElMessage } from 'element-plus'

  const activeNames = ref<string>('1');

  const formRules = {
  }

  const defaultForm = {
    emailCode: '',
    emailMail: '',
    receiveMail: '',
    emailPort: 0,
    emailMarketing: '',
    smsAccessKey: '',
    smsAccessSecret: '',
    smsSignName: '',
    smsCode: '',
    ossAccessKey: '',
    ossAccessSecret: '',
    ossRegion: '',
    ossBucket: '',
    logisticsUserId: '',
    logisticsKey: ''
  }
  // 表单逻辑
  const settingForm = ref<ICreateOrUpdateSetting>({ ...defaultForm });

  const loading = ref<boolean>(false);

  // 查询系统设置详情
  const getSettingApi = async () => {
    loading.value = true
    const res = await getSetting()
    loading.value = false
    if (res?.code === 200) {
      settingForm.value = res.data as ICreateOrUpdateSetting;
    }
  }

  const settingFormRef = ref();
  const updateOrCreate = async () => {
    settingFormRef.value.validate(async (valid: boolean) => {
      if (valid) {
        loading.value = true
        const res = await updateSetting(settingForm.value)
        loading.value = false
        if (res?.code === 200) {
          ElMessage({ type: 'success', message: '更新成功' })
          getSettingApi();
        } else {
          ElMessage({ type: 'error', message: res?.msg || '网络异常，请稍后重试！' })
        }
      }
    })
  }

  // 发送邮箱
  const sendMail = async () => {
    loading.value = true
    const obj = { content: '大山系统测试发送邮箱' }
    const res = await sendMailApi(obj)
    loading.value = false
    if (res?.code === 200) {
      ElMessage({ type: 'success', message: '发送成功' })
    } else {
      ElMessage({ type: 'error', message: res?.msg || '网络异常，请稍后重试！' })
    }
  }

  // 发送短信
  const sendSms = async () => {
    loading.value = true
    const obj = { phone: 15322682443 }
    const res = await sendSmsApi(obj)
    loading.value = false
    if (res?.code === 200) {
      ElMessage({ type: 'success', message: '发送成功' })
    } else {
      ElMessage({ type: 'error', message: res?.msg || '网络异常，请稍后重试！' })
    }
  }

  const races = ref<Array<any>>([])
  // 查询物流信息
  const sendLogisticsApi = async () => {
    loading.value = true
    const res = await sendLogistics()
    loading.value = false
    if (res?.code === 200) {
      console.log(res.data)
      races.value = res.data?.Traces
      ElMessage({ type: 'success', message: '查询成功' })
    } else {
      ElMessage({ type: 'error', message: res?.msg || '网络异常，请稍后重试！' })
    }
  }

  getSettingApi();
</script>

<style lang="scss" scoped>
  .btnBox {
    width: calc(100% - var(--sidebar-width));
    padding: 20px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width) !important;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    box-shadow: -6px 0px 16px 0 rgba(0,0,0,0.05);
  }

  .infoImage {
    width: 200px;
    height: 200px;
  }

  .info-container {
    padding-bottom: 60px
  }
</style>
